<template>
  <div>
    <div class='notice'>
      <div class='helpGroup'>
        <el-dropdown trigger='click' @command='handleCommand'>
          <div class='btn'>
            <div class='iconfont icon-help3'></div>
          </div>
          <template #dropdown>
            <el-dropdown-menu class='menu'>
              <el-dropdown-item command='feedback'>
                <svg class='coloricon' aria-hidden='true' style='font-size:17px'>
                  <use xlink:href='#icon-bianji'></use>
                </svg>
                <span style='padding-left:5px; font-size:15px;line-height: 2em;'>意见反馈</span>
              </el-dropdown-item>
              <!--              <el-dropdown-item command='video'>-->
              <!--                <svg class='coloricon' aria-hidden='true' style='font-size:17px'>-->
              <!--                  <use xlink:href='#icon-shipin1'></use>-->
              <!--                </svg>-->
              <!--                <span style='padding-left:5px; font-size:15px;line-height: 2em;'>使用视频教程</span>-->
              <!--              </el-dropdown-item>-->
              <el-dropdown-item command='manual'>
                <svg class='coloricon' aria-hidden='true' style='font-size:17px'>
                  <use xlink:href='#icon-tongxun'></use>
                </svg>
                <span style='padding-left:5px; font-size:15px;line-height: 2em;'>使用手册</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <!-- <div>新提醒模块可以放置到这里</div> -->

    </div>


    <el-dialog
      v-model='totalState'
      :title='type.title'
      width='65%'
      :close-on-click-modal='false'
      @close='clickClose'
      append-to-body
      :before-close='clickClose'
      destroy-on-close
    >

      <Feedback ref='feedbackRef' v-if="type.value=='feedback'"></Feedback>
      <Videos v-if="type.value=='video'"></Videos>


      <template #footer v-if="type.value=='feedback'">
                <span class='dialog-footer'>
                    <el-button @click='clickReset'>取消</el-button>
                    <el-button type='primary' @click='clickOk'
                    >确认提交</el-button
                    >
                </span>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import Feedback from './children/Feedback.vue';
import Videos from './children/Videos.vue';
import {recommend} from '@/api/common';
import {ElMessage} from 'element-plus';
import {isAdmin, isTeach} from '@/utils/auth';
import {useAppEnvStoreRef} from "@/utils/appEnv";


const feedbackRef = ref(null);

const type = ref({title: '意见反馈', value: 'feedback'});
const totalState = ref(false);
const handleCommand = (e) => {
  if (e === 'feedback') {
    type.value = {title: '意见反馈', value: 'feedback'};
    totalState.value = true;
  } else if (e === 'video') {
    type.value = {title: '班课使用视频教程', value: 'video'};
    totalState.value = true;
  } else if (e === 'manual') {
    const {appEnv} = useAppEnvStoreRef()
    if (isAdmin() || isTeach()) {
      if (unref(appEnv).key === 'xsj') window.open('https://docs.qq.com/doc/DUENXQ0xtY0FCRWxX')
      if (unref(appEnv).key === 'cxg') window.open('https://docs.qq.com/doc/DUFpwYk5OUmxlWU9Z')
      return
    }
    if (unref(appEnv).key === 'xsj') window.open('https://docs.qq.com/doc/DUFhyS2poRFB0eWlp')
    if (unref(appEnv).key === 'cxg') window.open('https://docs.qq.com/doc/DUFFhS21hUVpJSVRY')
  }
};


//关闭弹窗
const clickClose = () => {
  totalState.value = false;
};


//点击取消
const clickReset = () => {
  totalState.value = false;
};


//点击ok
const clickOk = () => {
  recommend({recommendContent: feedbackRef.value.feedValue}).then(res => {
    if (res.code != 200) {
      ElMessage.error(res.msg);
      return;
    }
    totalState.value = false;
    ElMessage.success('提交成功，感谢您的反馈！');
  });
};
</script>


<style scoped lang='scss'>
.notice {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 5;

  .helpGroup {
    .btn {
      width: 46px;
      height: 46px;
      background: #212121;
      color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 5px 10px rgba(10, 10, 10, 0.3);
      cursor: pointer;

      .iconfont {
        font-size: 26px;
      }
    }
  }
}
</style>
